<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - glTF loader</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="./css/main.css">
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>

	<body style="background: #fff">
	<style>
		.color{
			background: #130AF2;
			width: 30px;
			height: 30px;
			border-radius: 4px;
			margin: 10px;
		}
	</style>
	<div style="position: absolute; top: 0px;right:10px">
		<div class="color" style="background:#130AF2 " ></div>
		<div class="color" style="background:#FF69B4 " ></div>
		<div class="color" style="background:#6A5ACD " ></div>
		<div class="color" style="background:#00FF00 " ></div>


	</div>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader<br />
			Battle Damaged Sci-fi Helmet by
			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
			<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
		</div>

		<script type="module">

			import * as THREE from './threejs/build/three.module.js?22=11';

			import Stats from './threejs/jsm/libs/stats.module.js';


			// 制作一个地板
			import { EffectComposer } from './threejs/jsm/postprocessing/EffectComposer.js';
			import { RenderPass } from './threejs/jsm/postprocessing/RenderPass.js';
			import { OutlinePass  } from './threejs/jsm/postprocessing/OutlinePass.js';
			import { OrbitControls } from './threejs/jsm/controls/OrbitControls.js';
			import { GLTFLoader } from './threejs/jsm/loaders/GLTFLoader.js';
			import { RGBELoader } from './threejs/jsm/loaders/RGBELoader.js';
			import { RoughnessMipmapper } from './threejs/jsm/utils/RoughnessMipmapper.js';


			// Helper为灯关的辅助线方便调试

			//射线检测

			let colorIndex =0
			let colorArr =["#130AF2","#FF69B4","#6A5ACD","#00FF00"]

			let camera, scene, renderer,floor,directionalLight,gltfobj,controls,stats;

			init();
			//doinitLight()
			dolight()
			dodiban()
			doAxsHelper()
			render();

			$(function(){

				$(".color").click(function(){

					colorIndex=$(this).index()
				})

			})
			// // 初始化灯光
			function doinitLight() {
				 directionalLight = new THREE.DirectionalLight( 0xffffff, 0.3 );//模拟远处类似太阳的光源
				directionalLight.color.setHSL( 0.1, 1, 0.95 );
				directionalLight.position.set( 0, 200, 0).normalize();
				scene.add( directionalLight );

				var ambient = new THREE.AmbientLight( 0x404040 ); //AmbientLight,影响整个场景的光源
				ambient.position.set(30,30,30);
				scene.add( ambient );
			}
			function dolight(){

				directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
				directionalLight.position.set(-4, 8, 4);
				let dhelper = new THREE.DirectionalLightHelper(directionalLight, 5, 0xff0000);

				let hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.4);
				hemisphereLight.position.set(0, 8, 0);
				let hHelper = new THREE.HemisphereLightHelper(hemisphereLight, 5);

				scene.add(directionalLight);
				scene.add(hemisphereLight);

				// 光源开启阴影
				directionalLight.castShadow = true;
				directionalLight.shadow.mapSize = new THREE.Vector2(1024, 1024);

			}
			function doAxsHelper(){
				return
				let axs  = new THREE.AxesHelper(1000)
				scene.add(axs)
			}

			function init() {
				dostats()

				const container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1,1000 );
				camera.position.set( -10, 301, 271 );

				scene = new THREE.Scene();
				// scene.background=new THREE.Color( "#9370DB" );
				const loader = new GLTFLoader().setPath( './gltf/3303/' );
				loader.load( 'NewProject.gltf', function ( gltf ) {
					console.log(gltf.scene)
					gltf.scene.traverse( function ( child ) {

						if ( child.isMesh ) {
							child.castShadow = true;
							child.receiveShadow = true;
							// 使用材料自身的颜色  在无管线的情况下  自行发光
							//child.material.emissive =  child.material.color;
							//child.material.emissiveMap = child.material.map ;
							// TOFIX RoughnessMipmapper seems to be broken with WebGL 2.0
							// roughnessMipmapper.generateMipmaps( child.material );
							const   box = new THREE.Box3().setFromObject(child)

							const  centert= box.getCenter(new THREE.Vector3());
						//#console.log("center")
						//	#console.log(centert)

							//


						}

					} );
					gltf.scene.rotation.x=4.7
					gltf.scene.scale.set(0.01,0.01,0.01)
					dobujian(gltf)

					console.log(gltf)
					console.log(gltf.scene)
					scene.add( gltf.scene );


					render();

				} );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 1;
				renderer.outputEncoding = THREE.sRGBEncoding;

				// 首先渲染器开启阴影
				renderer.shadowMap.enabled = true;

				// 模型Mesh开启阴影
				container.appendChild( renderer.domElement );

				const pmremGenerator = new THREE.PMREMGenerator( renderer );
				pmremGenerator.compileEquirectangularShader();

				controls = new OrbitControls( camera, renderer.domElement );
				controls.addEventListener( 'change', render ); // use if there is no animation loop
				controls.autoRotate = true;//是否自动旋转
				controls.autoRotateSpeed = 0.5;//自动旋转速度，正比
				controls.update();

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

				render();

			}


			function dodiban(){


				let floorGeometry = new THREE.PlaneGeometry(5000, 5000, 1);
				let floorMaterial = new THREE.MeshPhongMaterial({
					color: 0x77F28F,
					shininess: 0,
					// wireframe: true
				});
				 floor = new THREE.Mesh(floorGeometry, floorMaterial);
				floor.rotation.x = -0.5 * Math.PI;
				floor.position.y = -2.1;

				// 地板接受阴影开启
				floor.receiveShadow = true;
				scene.add(floor);
			}


			// 点击部件
			function  dobujian(gltf){
				let raycaster = new THREE.Raycaster();

				let mouse = new THREE.Vector2();

				const selectHandler = function (ev) {
					mouse.x = (ev.clientX / window.innerWidth) * 2 - 1;
					mouse.y = -(ev.clientY / window.innerHeight) * 2 + 1;

					raycaster.setFromCamera(mouse, camera);

					// 这里我们只检测模型的选中情况
					let intersects = raycaster.intersectObjects(gltf.scene.children, true);
					if (intersects.length > 0) {
						let selectedObjects = intersects[0].object;
						changecolor(selectedObjects)
					}
				}


				let composer = new EffectComposer(renderer);
				let renderPass = new RenderPass(scene, camera);
				composer.addPass(renderPass);

				let outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
				composer.addPass(outlinePass);

				outlinePass.visibleEdgeColor.set('#130AF2'); // 选中颜色
				outlinePass.edgeStrength = 5;
				outlinePass.edgeGlow = 1.5;


				render()
				document.body.addEventListener('click', selectHandler, false);
			}


			function changecolor(selectedObjects){
				let newMaterial = selectedObjects.material.clone();
				newMaterial.color = new THREE.Color(colorArr[colorIndex]); //重新修改颜色
				selectedObjects.material = newMaterial;
			}

			//


			//内存  帧数 仪表
			function dostats(){
				stats = new Stats();
				document.body.appendChild( stats.dom );

			}

			function render() {

				const time = Date.now() * 0.00008;

				camera.position.x = Math.sin( time ) * 500;
				camera.position.z = Math.cos( time ) * 500;
				camera.lookAt( scene.position );
				requestAnimationFrame(render)
				renderer.render( scene, camera );
				stats.update()

			}

		</script>

	</body>
</html>
